<template>
  <div class="toggle-box">
    <div class="pic">
      <img
        src="/src/assets/img/vector.png"
        @click="toggleToVect"
        :class="{ 'active': activeImage === 'vect' }"
      />
    </div>
    <div class="pic">
      <img
        src="/src/assets/img/image.png"
        @click="toggleToImage"
        :class="{ 'active': activeImage === 'image' }"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Vmap } from "@/zondyTools/zondy_map/index";

const activeImage = ref(null);

const toggleToVect = () => {
  activeImage.value = 'vect';
  Vmap.setVisible(true);
};

const toggleToImage = () => {
  activeImage.value = 'image';
  Vmap.setVisible(false);
};
</script>

<style scoped lang="scss">
.toggle-box {
  width: 200px;
  position: absolute;
  bottom: 50px;
  right: 10px;
  display: flex;
  gap: 20px;
  background-color: #ffffff; // 更改背景颜色为白色
  padding: 10px; // 添加内边距
  border-radius: 8px; // 添加圆角
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影
}

.toggle-box img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  padding: 5px;
  border: 2px solid #e0e0e0; // 更改默认边框颜色为浅灰色
  transition: border-color 0.3s ease;

  &:hover {
    border-color: #409eff;
    cursor: pointer;
  }

  &.active {
    border-color: #409eff;
  }
}
</style>